<template>
  <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
    <template #template>
      <el-card>
        <template #header>
          <div>
            <el-skeleton-item variant="h3" style="width: 40%" />
            <el-skeleton-item variant="rect" style="float: right; width: 1em; height: 1em" />
          </div>
        </template>

        <div class="flex-x-between">
          <el-skeleton-item variant="text" style="width: 30%" />
          <el-skeleton-item variant="circle" style="width: 2em; height: 2em" />
        </div>
        <div class="mt-5 flex-x-between">
          <el-skeleton-item variant="text" style="width: 50%" />
          <el-skeleton-item variant="text" style="width: 1em" />
        </div>
      </el-card>
    </template>
    <template v-if="!visitStatsLoading">
      <el-card shadow="never">
        <template #header>
          <div class="flex-x-between">
            <span class="text-gray">访客数(UV)</span>
            <el-tag type="success" size="small">日</el-tag>
          </div>
        </template>

        <div class="flex-x-between mt-2">
          <div class="flex-y-center">
            <span class="text-lg">{{ visitStatsData.todayUvCount }}</span>
            <span :class="[
    'text-xs',
    'ml-2',
    computeGrowthRateClass(visitStatsData.uvGrowthRate),
  ]">
              <el-icon>
                <Top v-if="visitStatsData.uvGrowthRate > 0" />
                <Bottom v-else-if="visitStatsData.uvGrowthRate < 0" />
              </el-icon>
              {{ formatGrowthRate(visitStatsData.uvGrowthRate) }}
            </span>
          </div>
          <div class="i-svg:visitor w-8 h-8" />
        </div>

        <div class="flex-x-between mt-2 text-sm text-gray">
          <span>总访客数</span>
          <span>{{ visitStatsData.totalUvCount }}</span>
        </div>
      </el-card>
    </template>
  </el-skeleton>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import LogAPI, { VisitStatsVO, VisitTrendVO } from "@/api/system/log";
import { formatGrowthRate } from "@/utils";

// 访客统计数据加载状态
const visitStatsLoading = ref(true);
// 访客统计数据
const visitStatsData = ref<VisitStatsVO>({
  todayUvCount: 0,//今日访客数
  uvGrowthRate: 0,//访客增长率
  totalUvCount: 0,//总访客数
  todayPvCount: 0,//今日浏览量
  pvGrowthRate: 0,//浏览量增长率
  totalPvCount: 0,//总浏览量
});

/**
 * 获取访客统计数据
 */
const fetchVisitStatsData = () => {
  LogAPI.getVisitStats()
    .then((data) => {
      visitStatsData.value = data;
    })
    .finally(() => {
      visitStatsLoading.value = false;
    });
};


/**
 * 根据增长率计算对应的 CSS 类名
 *
 * @param growthRate - 增长率数值
 */
const computeGrowthRateClass = (growthRate?: number): string => {
  if (!growthRate) {
    return "color-[--el-color-info]";
  }
  if (growthRate > 0) {
    return "color-[--el-color-danger]";
  } else if (growthRate < 0) {
    return "color-[--el-color-success]";
  } else {
    return "color-[--el-color-info]";
  }
};
// 组件挂载后加载访客统计数据和通知公告数据
onMounted(() => {
  fetchVisitStatsData();
});
</script>

<style lang="scss" scoped></style>
